<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane>
        <span slot="label"> 管理员列表</span>
        <!--         导出按钮-->

        <nav-btn :sheet-header="xlsxHeader"
                 :sheet-list="_list"
                 xlsx-name="管理员列表"
                 @search-method="handleGetSearchActivity"
        />
        <el-table :data="xlsxSheet" border max-height="680" style="width: 100%">


          <el-table-column v-for="(item,index) in settings"
                           :label="item"
                           :prop="index"
                           :key="item"
          />
          <el-table-column label="操作"  width="190" fixed="right">

            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDel(scope.row)">重置密码</el-button>
            </template>
          </el-table-column>

        </el-table>

        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
        :visible.sync="dialogVisible"
        title="修改信息"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.managerName" placeholder="名称"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirmUpdate(form)">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      currentPage: 1,
      keyword: "",
      currentPageSize: 10,
      total: 0,
      content: "",
      Contentshow: false,
      dialogVisible: false,
      form: {
        managerAccount: null,
        managerName: null,
      },
      settings: {
        "managerId": "管理员ID",
        "managerAccount": "管理员账号",
        "managerCreatedate": "创建日期",
      },

    };
  },
  computed: {

    xlsxSheet () {
      const list = this.list;
      let _list = [];
      _list = list.map(value => {
        console.log(`value-->`, value);
        return {
          "managerId": value?.managerId,
          "managerAccount": value?.managerAccount,
          "managerCreatedate": value?.managerCreatedate,

        };
      });

      return _list;
    },
    xlsxHeader () {
      const { settings } = this;
      return Object.values(settings);
    },
    _list () {
      const { xlsxSheet } = this;
      let _list = xlsxSheet.map(value => {
        return [Object.values(value)];
      });
      return _list.flat(1);
    },
  },

  mounted () {
    this.handleGetManager();
  },
  components: {
    "nav-btn": () => import("../../components/navBtn"),

  },
  methods: {
    // 分页查询全部闲置
    async handleGetManager () {
      const res = await this.$http.manager_getManagerList({
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      console.log(res);
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.length;
    },
    async handleUpdate (info) {
      this.dialogVisible = true;
      console.log(info);
      this.form = info;
    },
    async handleConfirmUpdate (form) {
      this.dialogVisible = false;
      let res = await this.$http.managerModify(form);
      if (res.code !== 0) return null;
      return this.$router.go(0);
    },

    async handleDel (form) {
      let params = {
        managerId: form.managerId,
        newPass: "888888",
      };
      let res = await this.$http.resetPass(params);
      if (res.code !== 0) return null;
      this.$router.go(0);
    },
    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetManager();
    },

    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetManager();
    },
    async handleGetSearchActivity () {

    },
  },

};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 40px;
}

.el-table {
  margin-top: 20px;
}

.row {
  margin-top: 20px;
}
</style>
